<template>
  <div class="category">
    <nav-bar class="bar">
      <div slot="center">商品分类</div>
    </nav-bar>
    <div class="tabMenu">
      <tab-menu :getCartdata="getCartgorydata" @selectItem="selectMenu"></tab-menu>
    </div>
    <scroll class="content" ref="scroll">
      <content-cartgory :subcategories="getCartsubData"></content-cartgory>
      <tab-control :titles="['综合', '新品', '销量']" @tabClick="tabClick"></tab-control>
      <cartgory-detail :category-detail="getCartgoryDetail"></cartgory-detail>
    </scroll>
  </div>
</template>

<script>
import NavBar from '../../components/common/navbar/NavBar'
import TabMenu from  './childrenCartgory/tab-menu'
import ContentCartgory from  './childrenCartgory/contentCartgory'
import TabControl from '../../components/content/tabControl/TabControl'
import CartgoryDetail from  './childrenCartgory/CartgoryDetail'
import Scroll from '../../components/common/scroll/Scroll'
import {getCartgory,getSubCartgory,getCartgoryDetail} from '../../network/cartgory'

export default {
  name: "Fenlei",
  components: {
    NavBar,
    TabMenu,
    ContentCartgory,
    Scroll,
    TabControl,
    CartgoryDetail
  },
  data() {
    return {
      getCartgorydata:[],//主数据
      getCartsubData:{},//子分页数据
      getCartgoryDetail:[],
      currentIndex: -1,
      currenttype: 'pop',


    }
  },
  methods: {
    //请求分类数据
    getCartgoryData(){
      getCartgory().then(res =>{
        this.getCartgorydata = res.data.category.list
        // 当用户刚点进来或者刷新的时候 映射正在流行的数据
        this.getSubCartgories(0)


      })
    },
    //请求第一页分类的数据  点击菜单时请求分类页数据
    getSubCartgories(index) {
      this.currentIndex = index;
      const mailKey = this.getCartgorydata[index].maitKey;
      getSubCartgory(mailKey).then(res => {
        this.getCartsubData = res.data
      })
      //获取所有tabcontrol类型的数据
      this.getCartgoryDetailList(this.currenttype)

    },

    //请求分页详情页数据
    getCartgoryDetailList(type){
      //获取请求的miniWallkey
      const miniWallkey = this.getCartgorydata[this.currentIndex].miniWallkey
      getCartgoryDetail(miniWallkey ,type).then(res =>{
        //保存类型数据
        this.getCartgoryDetail = res
      })
    },


    selectMenu(index){
      this.getSubCartgories(index)
      //点击其他类型时滚动到最上方
      this.$refs.scroll.scroll.scrollTo(0 ,0 ,0)
    },
    tabClick(index){
      if (index === 0){
        this.currentIndex =0
        this.currenttype = 'pop'
         this.getCartgoryDetailList(this.currenttype)
      }else  if(index === 1){
        this.currentIndex =1
        this.currenttype = 'sell'
        this.getCartgoryDetailList(this.currenttype)
      }else {
        this.currentIndex =2
        this.currenttype = 'new'
        this.getCartgoryDetailList(this.currenttype)
      }
      console.log(index)
    }
  },
  created() {
    this.getCartgoryData()

  },
  mounted(){

  },
  activated() {

  }

}
</script>

<style scoped>
.bar {
  background-color: var(--color-high-text);
  color: #ffffff;
  position: relative;

}
.tabMenu{
  height: calc(100% - 44px - 49px);
  width: 100px;

}
.content{
  height: calc(100% - 44px - 49px);
  position: absolute;
  left: 100px;
  overflow: hidden;
}

</style>
